<template>
    <Dialog :title="comInfo.name" :show="true" @close="cancel" :width="480" height="auto" :left="uiLeft" :top="uiTop">
        <div class="box">
            <!-- 功能按钮 -->
            <div class="cimrts-menu">
                <FucMenuList :menuList="treeAddMenuList" @clickComponent="clickComponent" :isDisabled="false"
                    :isChecked="true" />
            </div>
            <div class="box-choose">
                <div class="tree-model-classes">
                    <div v-for="item in treeModelClassesRef" :ket="item.id" @click="setTreeModelClassName(item)"
                        :class="{ selected: currentTreeModelClassNameRef == item.name }">
                        <img :src="item.thumb" width="80" height="80" />
                        <p :title="item.name">{{ item.name }}</p>
                    </div>
                </div>
                <div class="model-base">
                    <el-table :data="modelBase" border :cell-style="cellStyle2" ref="tableRef"
                        :header-cell-style="cellStyleSmall" max-height="180" @row-click="currentChange"
                        highlight-current-row >
                        <el-table-column prop="shugao" label="树高(米)" :show-overflow-tooltip="true" />
                        <el-table-column prop="xiongjing" label="胸径(厘米)" :show-overflow-tooltip="true" width="auto" />
                        <el-table-column prop="zhixiagao" label="枝下高(米)" :show-overflow-tooltip="true" width="auto" />
                        <el-table-column prop="dongxiguanfu" label="东西冠幅(米)" :show-overflow-tooltip="true"
                            width="auto" />
                        <el-table-column prop="nanbeiguanfu" label="南北冠幅(米)" :show-overflow-tooltip="true"
                            width="auto" />
                    </el-table>
                </div>
                <div class="btns">
                    <el-button @click="clear">清空</el-button>
                    <el-button @click="autoMatch">自动匹配</el-button>
                </div>
                <div class="info">
                    <div>
                        <span>树高(米)：</span>
                        <el-input-number v-model="shugaoRef" controls-position="right" :min="0" size="small" />
                    </div>
                    <div>
                        <span>胸径(厘米)：</span>
                        <el-input-number v-model="xiongjingRef" controls-position="right" :min="0" size="small" />
                    </div>
                    <div>
                        <span>枝下高(米)：</span>
                        <el-input-number v-model="zhixiagaoRef" controls-position="right" :min="0" size="small" />
                    </div>
                    <div>
                        <span>东西冠幅(米)：</span>
                        <el-input-number v-model="dongxiguanfuRef" controls-position="right" :min="0" size="small" />
                    </div>
                    <div>
                        <span>南北冠幅(米)：</span>
                        <el-input-number v-model="nanbeiguanfuRef" controls-position="right" :min="0" size="small" />
                    </div>
                </div>
            </div>
        </div>
    </Dialog>
</template>
<script setup lang="ts">
import FucMenuList from "@/components/common/FucMenuList.vue";
import Dialog from "@/components/Dialog.vue";
import { getProjectManager } from "@/scripts/getProjectManager";
import { treeAddMenuList } from "@/scripts/menu/forest/treeAddMenuList";
import { onBeforeUnmount, onMounted, ref, watch } from "vue";
import {
    createVueDisposer,
    toVR,
} from "earthsdk-ui";
import { cellStyle, headCellStyle, cellStyleSmall, cellStyle2, } from "../../scripts/tableStyle";
import { findClosestIndex } from "@/scripts/utils";
import { ElMessage } from "element-plus";

const props = withDefaults(defineProps<{ comInfo: any }>(), {});
const emits = defineEmits(["cancel"]);
const cancel = () => {
    emits("cancel", props.comInfo.id);
};
const uiLeft = document.body.clientWidth - 10 - 480;
const uiTop = ref(60);


const d = createVueDisposer(onBeforeUnmount);
const objm = getProjectManager();

const eSForestManager = getProjectManager().eSForestManager;
const eSForest = eSForestManager.eSForest;
const addTree = eSForestManager.addTree;


const currentDialog = ref<any>(undefined);

const forestPropSceneTree = toVR<any>(d, [objm, "forestPropSceneTree"])

// 操作多边形
const isHighlightRef = toVR<string>(d, [addTree, "isHighlight"])
// 树种
const treeModelClassesRef = toVR<any>(d, [addTree, "treeModelClasses"])
// 当前选中树种
const currentTreeModelClassNameRef = toVR<string>(d, [addTree, "currentTreeModelClassName"])
// 当前选中的模型库
const currentModelBaseRef = toVR<any>(d, [addTree, "currentModelBase"])
// 树高
const shugaoRef = ref(0)
// 胸径
const xiongjingRef = ref(0)
// 枝下高
const zhixiagaoRef = ref(0)
// 东西冠幅
const dongxiguanfuRef = ref(0)
// 南北冠幅
const nanbeiguanfuRef = ref(0)

//  选择树种
const setTreeModelClassName = (item: any) => {
    currentTreeModelClassNameRef.value = item.name
}

// 树种模型库
const modelBase = ref<any>([])

const tableRef = ref<any>(null)

watch(currentTreeModelClassNameRef, () => {
    if (!currentTreeModelClassNameRef.value) return;
    const treeTypes = eSForestManager.eSForest.treeTypes
    modelBase.value = treeTypes[currentTreeModelClassNameRef.value]
    console.log("modelBase.value", modelBase.value);
    
    if (modelBase.value.length) {
        const obj = modelBase.value[0]
        currentModelBaseRef.value = { ...obj }
        tableRef.value.setCurrentRow(obj);
    } else {
        currentModelBaseRef.value = {} 
        tableRef.value.setCurrentRow({});
    }
})

// 树种模型库切换
const currentChange = (row: any) => {
    if(!row)return;
    console.log("row", row);

    currentModelBaseRef.value = { ...row }
}

watch(currentModelBaseRef, () => {
    shugaoRef.value = currentModelBaseRef.value.shugao ?? 0
    xiongjingRef.value = currentModelBaseRef.value.xiongjing ?? 0
    zhixiagaoRef.value = currentModelBaseRef.value.zhixiagao ?? 0
    dongxiguanfuRef.value = currentModelBaseRef.value.dongxiguanfu ?? 0
    nanbeiguanfuRef.value = currentModelBaseRef.value.nanbeiguanfu ?? 0
})


// 清空信息
const clear = () => {
    currentModelBaseRef.value = {}
}

// 自动匹配
const autoMatch = () => {
    if (!modelBase.value.length) {
        ElMessage.warning('请选择树种')
        return;
    }
    if (!shugaoRef.value) {
        ElMessage.warning('请输入树高')
        return;
    }
    const arr = modelBase.value.map((e: any) => e.shugao)
    const index = findClosestIndex(arr, shugaoRef.value)
    currentModelBaseRef.value = { ...modelBase.value[index] }
}

// 鼠标点击组件
const clickComponent = (item: any) => {
    isHighlightRef.value = item.id;
    if (!currentTreeModelClassNameRef.value || !(Object.entries(modelBase.value).length)) return;
    item.status != "active" ? item.status = "active" : item.status = "none";
    if (item.status == "none") {
        isHighlightRef.value = ''
        objm.forestPropSceneTree = undefined
    }
}

watch(forestPropSceneTree, (val) => {
    if (forestPropSceneTree.value) return;
    if (isHighlightRef.value) {
        const item = treeAddMenuList.value.find((item: any) => item.id == isHighlightRef.value);
        // @ts-ignore
        item.status = 'none'
    }
    objm.forestPropSceneTree = undefined
    isHighlightRef.value = ''
})

onMounted(() => {
});
onBeforeUnmount(() => {
    addTree.clear();
    treeAddMenuList.value.map((i: any) => i.status = "none")
});
</script>

<style scoped>
.box {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
}

.cimrts-menu {
    background-color: #f0f0f0;
    width: calc(100%);
    height: 40px;
    display: flex;
}

.box-choose {
    padding: 15px 10px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* .box-choose>div {
    display: grid;
    grid-template-columns: 80px 1fr;
    align-items: center;
}

.box-choose div span {
    width: 80px;
    display: inline-block;
}

.box-choose>div .el-input,
.box-choose>div .el-select {
    width: 350px;
} */

.tree-model-classes {
    height: 100px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    overflow-y: auto;
    cursor: pointer;
}

.tree-model-classes>div {
    box-sizing: border-box;
    width: 80px;
    height: 100px;
}

.tree-model-classes>div>img {
    box-sizing: border-box;
    border: 1px solid #939e8f;
}


.tree-model-classes>div>p {
    padding: 0px;
    margin: 0px;
    font-size: 14px;
    text-align: center;
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all;
    white-space: nowrap;
}

.selected img {
    border: 4px solid #537cfe !important;
}

.info {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 10px;
}

.info>div>span {
    display: inline-block;
    width: 95px;
}

</style>